<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta content="telephone=no" name="format-detection" />
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover" />

		<meta charset="utf-8">
		<script type="text/javascript" src="js/boot.js"></script>
		<title>资金流水</title>
	</head>

	<body>
		<div id="page" style="background-color: #fff;">
			<div class="navbar">
				<img class="navbar-left arrow" src="image/8_2fanhui.png" onclick="javascript:history.back();">
				<div class="nav-title" onclick="javascript:history.back();">
					资金流水
				</div>
				<div></div>
			</div>
			<div class="datesel">
				<div class="datetime" @click="beginClick(recordTime_from)">
					<img src="image/8_1time.png">
					<input disabled placeholder="请选择开始时间" type="text" v-model="recordTime_from" />
				</div>
				至
				<div class="datetime" @click="endClick(recordTime_to)">
					<img src="image/8_1time.png">
					<input disabled placeholder="请选择结束时间" type="text" v-model="recordTime_to" />
				</div>
			</div>
			<van-popup v-model="dateShow" position="bottom">
				<van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" @confirm="confirm()" @cancel="cancel" />
			</van-popup>
			<div style="height: 0.1rem;background-color: #efeff4;"></div>
			<div class="tabbs van-hairline--bottom">
				<van-tabs v-model="active" type="card" color="#0099f9" title-inactive-color="#333" @click="tabClick">
					<van-tab v-for="(tab,index) in tabbs" :title="tab.title">
						<div class="capital van-hairline--top">
							<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad(index)">
								<div class="capitalList van-hairline--bottom" v-for="rec in tab.record">
									<div class="capitalbox">
										<img class="amountIcon" :src="rec.title == '消费' ? 'image/7_1xf.png' : rec.title == '补贴' ? 'image/7-2but.png' : 'image/7_3chonz.png'">
										<div class="amountInfo">
											<div>
												<div class="amountTitle">
													{{rec.title}}
												</div>
												<div class="amountTime">
													{{rec.recordTime}}
												</div>
											</div>
											<span class="amountNum" :style="{color: rec.title == '消费' ? '#333' : '#37c150'}">{{rec.title == '消费' ? '-' : '+'}}{{rec.newMoney.toFixed(2)}}元</span>
										</div>
									</div>
								</div>
							</van-list>
						</div>
					</van-tab>
				</van-tabs>
			</div>
		</div>
	</body>

	<script type="text/javascript">
		var openId = localStorage.getItem('openId');
		var str = localStorage.getItem('user');
		var user = JSON.parse(str);
		var data = {
			"userNo": user.workNo,
			"userName": user.userName
		};
		var account = null;
		var that = this;
		http.postSync("/scmain/getAccount.do", data, function(page) {
			if(page.success) {
				that.account = page.data;
			} else {
				alert(page.message);
			}
		});

		new Vue({
			el: '#page',
			data: {
				recordTime_from: '',
				recordTime_to: '',
				dateShow: false,
				sel: '',
				minDate: new Date(2018, 0, 1),
				maxDate: new Date(),
				currentDate: new Date(),
				active: 0,
				loading: false,
				finished: false,
				tabbs: [{
					title: '全部',
					record: []
				}, {
					title: '消费',
					record: []
				}, {
					title: '充值',
					record: []
				}, {
					title: '补贴',
					record: []
				}],
				currentIndex: 0,
				pageContent: []
			},
			methods: {
				beginClick(e) {
					if(e) {
						this.currentDate = e;
					}
					this.dateShow = true;
					this.sel = 1;
				},
				endClick(e) {
					if(e) {
						this.currentDate = e;
					}
					this.dateShow = true;
					this.sel = 2;
				},
				confirm() {
					this.dateShow = false;
					if(this.sel == 1) {
						this.recordTime_from = this.currentDate.Format('yyyy-MM-dd');
					} else {
						this.recordTime_to = this.currentDate.Format('yyyy-MM-dd');
					}
					for(var i = 0; i < 4; i++) {
						this.pageContent[i].initial = true;
						this.pageContent[i].pageIndex = -1;
						this.pageContent[i].pageCount = 0;
						this.tabbs[i].record = [];
					}
					this.onLoad(this.currentIndex);
				},
				cancel() {
					this.dateShow = false;
				},
				tabClick() {
					this.finished = false;
					this.loading = false;
				},
				onLoad(i) {
					this.currentIndex = i;
					var page = this.pageContent[i];
					//alert("ok");
					if(page.initial == false && page.pageIndex == page.pageCount) {
						this.finished = true;
						return;
					}
					page.pageIndex = page.pageIndex + 1;
					// 加载状态开始
					this.loading = true;
					var that = this;
					page.recordTime_from = this.recordTime_from;
					page.recordTime_to = this.recordTime_to;
					// alert(JSON.stringify(page));
					http.post("/scmain/page.do", page, function(page) {
						if(page.success) {
							that.initial = false;
							// alert(JSON.stringify(page.data));
							var list = page.data;
							if(list.length > 0) {
								var type = null;
								var money = 0;
								var record = that.tabbs[that.currentIndex].record;
								for(var i = 0; i < list.length; i++) {
									if(list[i].dataType == 1) {
										type = '消费';
										money = list[i].newMoney / 100;
									} else if(list[i].dataType == 2) {
										type = '充值';
										money = list[i].newAddMoney / 100;
									} else if(list[i].dataType == 4) {
										type = '补贴';
										money = list[i].newSubMoney / 100;
									}
									// alert(type);
									record.push({
										title: type,
										recordTime: list[i].recordTime,
										newMoney: money
									});
								}
								that.page = page;
								that.page.data = null;
								// alert(page.pageIndex + ":" + page.pageCount);
								if(page.pageIndex == page.pageCount) {
									that.finished = true;
								}
							} else {
								that.finished = true;
							}
						} else {
							alert(page.message);
						}
						// 加载状态结束
						that.loading = false;
					});
				}
			},
			created() {
				this.pageContent = [];
				for(var i = 0; i < 4; i++) {
					this.pageContent.push({
						userSerial: account.userSerial,
						pageIndex: -1,
						pageSize: 10,
						orderBy: "jl_sj,DESC",
						initial: true
					});
				}
				this.pageContent[1].dataType = 1;
				this.pageContent[2].dataType = 2;
				this.pageContent[3].dataType = 4;
				// alert(JSON.stringify(this.pageContent));
			}
		})
	</script>

</html>